<template>
	<view class="content">
		<view class="top-bar ">
			<view class="top-bar-left" @tap="toLogin">
				<image src="../../static/images/common/back.png" class="back-Image" mode=""></image>
			</view>
		</view>
		<view class="logo">
			<image src="../../static/images/sign/logo1.png" mode=""></image>
		</view>
		<view class="main">
			<view class="title">注册</view>
			<!-- <view class="slogan">您好，欢迎来到yike!</view> -->
			<view class="inputs">
				<view class="inputs-div">
					<input type="text" placeholder="请输入用户名" class="user" placeholder-style="color:#aaa;font-weight:400;" @input="getUser" />
					<view class="employ" v-if="userEmploy">已经占用</view>
					<image src="../../static/images/sign/right1.png" class="ok" mode="" v-if="isu"></image>
				</view>
				<view class="inputs-div">
					<input type="text" placeholder="请输入邮箱" class="email" placeholder-style="color:#aaa;font-weight:400;" @input="isEmail" />
					<view class="invalid" v-if="invalid">邮箱无效</view>
					<view class="employ" v-if="emailEmploy">已经占用</view>
					<image src="../../static/images/sign/right1.png" class="ok" mode="" v-if="ise"></image>
				</view>
				<view class="inputs-div">
					<input :type="type" placeholder="请输入密码" placeholder-style="color:#aaa;font-weight:400;" @input="getPsw" />
					<view class="employ" v-if="employ">密码无效</view>
					<image src="../../static/images/sign/biyan.png" class="look" v-if="isp" @click="looks" />
					<image src="../../static/images/sign/look.png" class="look" v-if="!isp" @click="looks" />
				</view>
			</view>
			<!-- <view class="tips">输入用户或密码错误!</view> -->
		</view>
		<view :class="[{submit:isok},{submit1:!isok}]">
			注册
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'password',
				isu: true, //用户符合？
				ise: false, //邮箱符合？
				isp: true, //密码切换
				invalid: false, //邮箱符合？
				userEmploy: false, //用户占有
				emailEmploy: false, //邮箱占有
				employ: false, //密码无效
				email: '',
				user: '',
				password: '',
				isok: false,
			}
		},
		methods: {
			getPsw: function(e) {
				this.password = e.detail.value;
				this.isOk();
			},
			getUser: function(e) {
				this.user = e.detail.value
				this.isOk();
			},
			isOk: function() {
				if (this.isu && this.ise && this.password.length > 5) {
					this.isok = true
				} else {
					this.isok = false
				}
			},
			//密码可视化切换
			looks: function() {
				if (this.isp) {
					this.type = "text";
					this.isp = !this.isp;
				} else {
					this.type = "password";
					this.isp = !this.isp;
				}
			},
			isEmail: function(e) {
				var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if (reg.test(e.detail.value)) {
					this.ise = true
					this.invalid = false
					this.email = e.detail.value
					this.isOk();
				} else {
					this.invalid = true
					this.ise = false
				}
			},
			toLogin: function() {
				uni.navigateTo({
					url: "../login/login"
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/index.scss";
	.logo image {
		padding-top: 256rpx;
		width: 194rpx;
		height: 92rpx;
		margin: 0 auto;
	}

	.main {
		padding: 54rpx $uni-spacing-row-lg 120rpx;
		width: 100%;
		box-sizing: border-box;

		.title {
			font-size: 56rpx;
			font-weight: 500;
			color: $uni-text-color;
			line-height: 80rpx;
		}

		.inputs {
			padding-top: 8rpx;

			input {
				padding-top: 40rpx;
				height: 88rpx;
				font-size: $uni-font-size-lg;
				font-weight: 500;
				color: $uni-text-color;
				line-height: 88rpx;
				border-bottom: 1px solid $uni-border-color;
			}
		}

		.inputs-div {
			position: relative;

			// box-sizing: content-box;
			.employ,
			.invalid {
				position: absolute;
				right: 0;
				top: 40rpx;
				font-size: $uni-font-size-base;
				font-weight: 500;
				line-height: 88rpx;
				color: $uni-color-warning;
			}

			.ok {
				position: absolute;
				right: 0;
				top: 76rpx;
				width: 38rpx;
				height: 30rpx;
			}

			.look {
				position: absolute;
				right: 0;
				top: 76rpx;
				width: 32rpx;
				height: 18rpx;
			}

		}
	}

	.submit {
		box-sizing: border-box;
		width: 520rpx;
		height: 96rpx;
		background: $uni-color-primary;
		box-shadow: 0px 50rpx 32rpx -36rpx rgba(255, 228, 49, 0.4);
		border-radius: 48rpx;
		text-align: center;
		line-height: 96rpx;
		font-size: $uni-font-size-lg;
		font-weight: 500;
		color: $uni-text-color;

	}

	.submit1 {
		box-sizing: border-box;
		width: 520rpx;
		height: 96rpx;
		background: rgba(39, 40, 50, 0.2);
		box-shadow: 0px 50rpx 32rpx -36rpx rgba(255, 228, 49, 0.4);
		border-radius: 48rpx;
		text-align: center;
		line-height: 96rpx;
		font-size: $uni-font-size-lg;
		font-weight: 500;
		color: $uni-text-color-inverse;

	}
</style>
